<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 赛事管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-button size="small" type="primary" style="margin-bottom:5px"  @click="handleAdd()">新增</el-button>
        <el-select v-model="status" placeholder="请选择" filterable
                   @change="statusselectchange"
        >
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="gameName" label="赛事名称" sortable width="160">
            </el-table-column>

            <el-table-column prop="sponsor" label="主办方" width="160">
            </el-table-column>

            <el-table-column prop="theme" label="主题" width="120">
            </el-table-column>

            <el-table-column prop="address" label="地址" width="200">
            </el-table-column>

            <el-table-column prop="liveUrl" label="直播地址" width="180">
            </el-table-column>


            <el-table-column   label="状态" width="120">
             <template scope="scope">
               {{scope.row.status==0?"未开启":scope.row.status==1?"报名中":scope.row.status==2?"进行中":scope.row.status==3?"已结束":"异常"}}
                </template>
            </el-table-column>

          <!--   <el-table-column  label="图片" :formatter="formatter" width="120">
               <template scope="scope">
          
                    <img style='width:50px;height:50px;' :src="$prefix+scope.row.backGroundImg"></img>
                </template>
            </el-table-column>-->
               
     
          


    
            
            <el-table-column label="操作" width="600">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button size="small" type="primary"
                               @click="handleEnroll(scope.$index, scope.row)">报名管理</el-button>
                    <el-button size="small" type="success"
                               @click="handlePlayer(scope.$index, scope.row)">选手管理</el-button>
                    <el-button size="small" type="warning"
                               @click="handleNoPass(scope.$index, scope.row)">审核未通过人员管理</el-button>
                    <el-button size="small" style="background-color: #D3DCE6"
                               @click="handleAreaManage(scope.$index, scope.row)">赛区管理</el-button>


                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    layout="total,prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="total">
            </el-pagination>
        </div>

        <!--预设区-->
        <div>
              <el-dialog title="新增赛事" v-model="formVisible">
                <el-form :model="game" :rules="rules" ref="game">
                    <el-form-item  label="赛事名称" prop="gameName">
                        <el-input v-model="game.gameName" auto-complete="off"></el-input>
                    </el-form-item>



                    <el-form-item  label="每张票价格" prop="voteMoney">
                        <el-input-number v-model="game.voteMoney"  :min="0.01" :max="1000"></el-input-number>
                    </el-form-item>



                    <el-form-item  label="主办方" prop="sponsor">
                        <el-input v-model="game.sponsor" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item  label="主题" prop="theme">
                        <el-input v-model="game.theme" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item  label="地址" prop="address">
                        <el-input v-model="game.address" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item  label="直播地址">
                        <el-input v-model="game.liveUrl" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item  label="比赛详情">
                    </el-form-item>

                    <quill-editor  ref="myTextEditor" v-model="game.gameDetail" :config="editorOption"></quill-editor>

                    <el-form-item >
                    </el-form-item>


                    <el-form-item prop="enrollEndTime">
                        <el-date-picker
                                v-model="game.enrollEndTime"
                                type="datetime"
                                @change="dateTimeChange"
                                format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="比赛状态:">
                        <el-radio-group v-model="gameStatus"
                                @change="handleStatusChange"
                        >
                            <el-radio-button  label="0">未开启</el-radio-button >
                            <el-radio-button  label="1">报名中</el-radio-button >
                            <el-radio-button  label="2">进行中</el-radio-button >
                            <el-radio-button  label="3">已结束</el-radio-button >
                        </el-radio-group>
                    </el-form-item>


                   
                    <el-form-item  label="赛事背景图上">
                        <img style="width:50px;height:50px;" class="pre-img" v-if="game.backGroundImg" :src="$prefix+game.backGroundImg" alt="">
                        <el-upload
                                :action="this.$api('Game')+'uploadBackGroundImg'"
                                :multiple="false"
                                type="drag"
                                :drag="true"
                                name="backGroundImg"
                                :on-progress="uploading"
                                :thumbnail-mode="true"
                                :on-error="uploadError"
                                :on-success="uploadSuccess"
                                :show-file-list="false"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>

                    <el-form-item  label="赛事背景图下">
                        <img style="width:50px;height:50px;" class="pre-img" v-if="game.backGroundDownImg" :src="$prefix+game.backGroundDownImg" alt="">
                        <el-upload
                                :action="this.$api('Game')+'uploadBackGroundImg'"
                                :multiple="false"
                                type="drag"
                                :drag="true"
                                name="backGroundImg"
                                :on-progress="uploading"
                                :thumbnail-mode="true"
                                :on-error="uploadError"
                                :on-success="uploadBackGroundDownImgSuccess"
                                :show-file-list="false"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>

                    <el-form-item  label="赛事详情背景图">
                        <img style="width:50px;height:50px;" class="pre-img" v-if="game.gameDetailImg" :src="$prefix+game.gameDetailImg" alt="">
                        <el-upload
                                :action="this.$api('Game')+'uploadBackGroundImg'"
                                :multiple="false"
                                type="drag"
                                :drag="true"
                                name="backGroundImg"
                                :on-progress="uploading"
                                :thumbnail-mode="true"
                                :on-error="uploadError"
                                :on-success="uploadGameDetailSuccess"
                                :show-file-list="false"
                >
                <i class="el-icon-upload"></i>
                <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false">取 消</el-button>
            <el-button type="primary" @click="addGame('game')">确 定</el-button>
            </div>
            </el-dialog>

            </div>
            </div>
            </template>

            <script>
            import { Loading } from 'element-ui';
            import { quillEditor } from 'vue-quill-editor';
            export default {
                data() {
                    return {
                game:{
                    gameId:-1,
                    gameName:"",
                    sponsor:"",
                    theme:"",
                    address:"",
                    liveUrl:"",
                    gameDetail:"",
                    backGroundImg:"",
                    enrollEndTime:"",
                    status:"",
                    gameDetailImg:"",
                    backGroundDownImg:"",
                     voteMoney:1
                },
                total:0,
                gameStatus:0,
                currentPage:1,
                tableData: [],
                formVisible:false,
                status:"",
                options: [{
                   value:'',
                   label:'全部'
                }, {
                    value: '0',
                    label: '未开启'
                }, {
                    value: '1',
                    label: '报名中'
                }, {
                    value: '2',
                    label: '进行中'
                },{
                    value: '3',
                    label: '已结束'
                }],
                editorOption: {
                    // something config
                },
                rules: {
                    gameName: [
                        { required: true, message: '请输入赛事名称', trigger: 'blur' }
                    ],
                    sponsor: [
                        { required: true, message: '请输入主办方', trigger: 'blur' }
                    ],
                    theme: [
                        { required: true, message: '请输入主题', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入地址', trigger: 'blur' }
                    ],
                    enrollEndTime: [
                        { required: true, message: '请选择报名结束时间', trigger: 'blur' }
                    ],
                    voteMoney: [
                        { required: true, message: '请填入每张票价格' },{ type: 'number', message: '价格为数字值'}
                    ]



                }


            }
        },
        components: {
            quillEditor
        },
        methods: {
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            onEditorChange({ editor, html, text }) {
                this.content = html;
                console.log(content);
            },
            dateTimeChange(datetime){
                this.game.enrollEndTime=datetime;
                console.log(datetime);
            },
            handleCurrentChange(currentPage){
                console.log(currentPage);
                let self = this;
                self.currentPage = currentPage;
                self.getData();

            },
            statusselectchange(){
                this.getData();
            },
            handleStatusChange(lable){
                console.log(lable);
                this.game.status = lable;
            },
            handleAdd(index,row){
                this.gameStatus = 0;
                let self = this;
                this.action="add";
                this.game={
                    gameId:-1,
                    gameName:"",
                    sponsor:"",
                    theme:"",
                    address:"",
                    liveUrl:"",
                    gameDetail:"",
                    backGroundImg:"",
                    enrollEndTime:"",
                    status:"0",
                    gameDetailImg:"",
                    voteMoney:1,
                    backGroundDownImg:""
                }
                 this.formVisible=true;

            },
            handleEnroll(index,row){
                this.$router.push({ path: '/enrollmanage', query: { gameId: row.gameId } });

            },
            handlePlayer(index,row){
                this.$router.push({ path: '/playermanage', query: { gameId: row.gameId } });

            },
            handleNoPass(index,row){
                this.$router.push({ path: '/nopassmanage', query: { gameId: row.gameId } });

            },
            handleAreaManage(index,row){
                this.$router.push({ path: '/regionManage', query: { gameId: row.gameId } });
            },
            handleEdit(index,row){
                let self = this;
                let params = {
                    gameId : row.gameId
                }



                console.log(row.gameId);
                 self.$req.pget(self.$api("Game")+"getGame",self,function(res){
                    self.game=res.data.data;
                     self.gameStatus=self.game.status;
                    console.log(self.game);
                    
                },params,true)
               
                this.action="edit";

                
                this.formVisible=true;

            },
            handleDelete(index, row) {
                 let self = this;
                let params = {
                    gameId : row.gameId
                }
                 this.$confirm('是否删除该赛事?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                         console.log(row.bannerId);
                        self.$req.pdel(self.$api("Game")+"deleteGame",self,function(res){
                            self.getData();
                            
                        },params,true)
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
                
                //this.$message.error('删除第'+(index+1)+'行');
            },
            getData(){
                let self = this;
                let params = {
                    page:self.currentPage,
                    status:self.status
                }
                console.log(params);

                 self.$req.pget(self.$api("Game")+"getGameList",self,function(res){
                     
                    self.tableData = res.data.data.content;
                    self.total = res.data.data.totalElements;
                    console.log(self.tableData);
                    
                },params,true)
            },
            uploading(res){
                this.loading=Loading.service({target:document.body,fullscreen:true,text:"拼命加载中~"});
            },
            uploadSuccess(res){
                this.loading&&this.loading.close();
                console.log(res);
                this.game.backGroundImg=res.data;
            },
            uploadError(){
                this.loading&&this.loading.close();
                this.$notify.error({
                    title: '上传失败',
                    message: '图片上传接口上传失败'
                });
            },
            uploadGameDetailSuccess(res){
                this.loading&&this.loading.close();
                console.log(res);
                this.game.gameDetailImg=res.data;
            },
            uploadBackGroundDownImgSuccess(res){
                this.loading&&this.loading.close();
                console.log(res);
                this.game.backGroundDownImg=res.data;
            },
             addGame(formName){
                let self = this;

                 self.$refs[formName].validate((valid) => {
                     console.log(valid);
                     if (valid) {
                         self.formVisible = false;
                         let data = self.game;
                    /*     data.gameName = encodeURI(data.gameName);
                         data.address = encodeURI(data.address);
                         data.gameDetail = encodeURI(data.gameDetail);
                         data.sponsor = encodeURI(data.sponsor);
                         data.theme = encodeURI(data.theme);*/
                         console.log(data);
                         self.$req.post(self.$api("Game")+"saveGame",self,function(res){
                             self.getData();
                         },data,true)
                     }
                     else {
                         return false;
                     }
                 });


            }
           



        },
        mounted:function(){
            this.getData();
        }
    }
</script>